<template>
    <div>



        <el-tree
            :data="list"
            ref="treeRef"
            show-checkbox
            default-expand-all
            node-key="roleId"
            :default-checked-keys="auth"
            :check-strictly="true"
            :props="{
                children: 'roleList',
                label: 'name',
            }"
        />

        <el-button type="primary" @click="edit" style="margin-top:50px;">修改</el-button>

        <!-- 添加角色的弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            title="提示"
            width="50%"
            :before-close="handleClose"
        >
            <div class="dialog-div">
                <div>当前已拿到提交需要的数据，真实开发时，提交api即可</div>
                <div >
                    ID：{{id}}
                </div>
                <div >
                    提交的ids：{{auth}}
                </div>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="route.back()">返回上一页</el-button>
                <el-button type="primary" @click="dialogVisible=false"
                >我知道了</el-button
                >
            </span>
            </template>
        </el-dialog>
        


    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {useRoute} from "vue-router";
import {initData} from "@/assets/typescript/auth"
import {getAuthList} from "@/request/api"


export default defineComponent({
    setup () {
        const route:any = useRoute();
        const params = route.params;
        const data = reactive(new initData(params.id,params.auth))

        onMounted(()=>{
            getAuthList().then((res:any)=>{
                data.list = res.data;
                
                /**
                 * 注意这里的res.data里面每一个对象的数据都是跟elemeng-plus的树形控件的使用值相同的。
                 * 每个对象item下都有一个child数据，这个child数据就是子选项的数据（当前数据的child === element树形控件的props）
                 * 简单来说：每个对象下面需要有一个对象形式的数组数据（也就是roleList）
                 * 例子：
                 *  {   roelId:10,
                        name:"角色管理",
                            roleList:
                            [
                                { name:"查看", roleId:11,},
                                { name:"删除", roleId:12,},
                            ]
                    }
                 */

            })
        })

        const edit = ()=>{
           let ids =  data.treeRef.getCheckedKeys().sort(function(a:number,b:number){return b - a})
           console.log("当前已拿到提交需要的数据，真实开发时，提交api即可");
           console.log(data.id);
           console.log(ids);
           data.dialogVisible = true
        }

        return {...toRefs(data),edit,route}
    }
})
</script>

<style scoped lang="scss">
.dialog-div{
    div+div{
        margin-top: 30px;
    }
}
</style>